/* components */
import SettingGPTServiceCardItem from '@gpt/components/service-card-item';
import SettingGPTViewDialog from '@gpt/components/dialog';
import SettingGPTViewServiceCheckbox from '@src/modules/setting/gpt/components/service-checkbox';
import SettingGPTViewCheckboxGroup from '@src/modules/setting/gpt/components/checkbox-group';
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum';
/* model */
import { RobotServiceList } from '@gpt/model';
/* vue */
import { defineComponent } from "vue";
/* scss */
import '@src/modules/setting/gpt/components/service-card-list.scss';
/* types */
import { PropType } from 'vue';
import { SettingGPTServiceItem } from '@src/modules/setting/gpt/types';
/* utils */
import { openRobotAppPage } from '@gpt/utils';
import { isFalsy } from '@src/util/type';

type SettingGPTViewDialogComponent = InstanceType<typeof SettingGPTViewDialog>;

enum SettingGPTServiceCardListEventEnum {
  Add = 'add',
  Delete = 'delete'
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTServiceCardList,
  components: {
    
  },
  props: {
    value: {
      type: Array as PropType<SettingGPTServiceItem[]>,
      default: () => []
    },
    robotId: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    isSystemRobot: {
      type: Boolean,
      default: false
    },
    onAdd: {
      type: Function
    },
    onDelete: {
      type: Function
    }
  },
  setup(props, { emit }) {
    
  },
  data() {
    return {
      serviceList: [] as SettingGPTServiceItem[],
      serviceListValue: [] as string[]
    }
  },
  computed: {
    settingGPTViewDialogComponent(): SettingGPTViewDialogComponent {
      return this.$refs.SettingGPTViewDialog as SettingGPTViewDialogComponent
    },
    isShowAddButton(): boolean {
      return isFalsy(this.disabled)
    },
    allowServiceList(): SettingGPTServiceItem[] {
      // 如果是系统机器人，则显示所有服务
      if (this.isSystemRobot) {
        return RobotServiceList
      }
      // 如果不是系统机器人，则只显示通用服务
      return RobotServiceList.filter(item => item.isCommon)
    },
    isShowServiceItemBottom(): boolean {
      return Boolean(this.isSystemRobot)
    }
  },
  methods: {
    onAddConfirmHandler() {
      const value = this.serviceListValue.length != 1 ? null : this.serviceListValue[0]
      this.$emit(SettingGPTServiceCardListEventEnum.Add, value)
    },
    onDeleteItemHandler(value: SettingGPTServiceItem) {
      this.$emit(SettingGPTServiceCardListEventEnum.Delete, value)
    },
    onClickItemHandler(value: SettingGPTServiceItem) {
      openRobotAppPage(value, this.robotId)
    },
    onServiceListChangeHandler(value: string[]) {
      this.serviceListValue = value
    },
    openDialog() {
      this.settingGPTViewDialogComponent.open()
    },
    closeDialog() {
      this.settingGPTViewDialogComponent.close()
    },
    addServiceHandler() {
      // 打开弹窗前，需要先清空之前的选择
      this.serviceListValue = []
      // 弹窗前，需要先判断哪些服务已经添加过了，需要禁用
      this.serviceList = this.allowServiceList.map(item => {
        const isDisabled = this.value.some(value => value.type === item.type)
        return {
          ...item,
          disabled: isDisabled
        }
      })
      // 打开弹窗
      this.openDialog()
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingGPTServiceCardList}>
        
        {this.value.map((item: SettingGPTServiceItem, index: number) => {
          return (
            <SettingGPTServiceCardItem 
              value={item}
              index={index}
              disabled={this.disabled}
              isSystemRobot={this.isSystemRobot}
              isShowBottom={this.isShowServiceItemBottom}
              onDelete={this.onDeleteItemHandler}
              onClick={this.onClickItemHandler}
            />
          )
        })}
        
        <div 
          v-show={this.isShowAddButton}
          class={[
            ComponentNameEnum.SettingGPTServiceCardItem,
            `${ComponentNameEnum.SettingGPTServiceCardItem}-add`,
          ]}
          onClick={this.addServiceHandler}
        >
          
          <span>
            <i class="iconfont icon-icon02"></i>
            添加应用服务能力
          </span>
          
        </div>
        
        <SettingGPTViewDialog
          title="添加应用服务能力"
          width="880px"
          ref="SettingGPTViewDialog"
          onConfirm={this.onAddConfirmHandler}
        >
          <SettingGPTViewCheckboxGroup
            multiple={false}
            value={this.serviceListValue}
            onChange={this.onServiceListChangeHandler}
          > 
            {this.serviceList.map((item, index) => {
              return (
                <SettingGPTViewServiceCheckbox
                  value={this.serviceList[index]}
                  disabled={item.disabled}
                >
                  { item.name }
                </SettingGPTViewServiceCheckbox>
              )
            })}
          </SettingGPTViewCheckboxGroup>
        </SettingGPTViewDialog>
        
      </div>
    )
  }
});